<template>
  <div>
    <div class="row">
      <div class="col-2">
        <p class="text-info text-center">当前第 {{index}} 首</p>
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>诗经</p>
        </h3>
        <div>
          <h5 class="text-center mb-3 font-weight-bold word-width">
            <p>{{currMsg.title}}</p>
            <small class="text-muted font-italic">{{currMsg.chapter}}</small>
          </h5>
          <ul class="list-unstyled text-small text-center word-width">
            <li v-for="itm in currMsg.content">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3">
        <button type="button" class="btn btn-outline-primary" @click="prev()">上一首</button>
        <button type="button" class="btn btn-outline-primary" @click="next()">下一首</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ShiJing',
    data () {
      return {
        index: 1,
        currMsg: {},
        dataMsg: [
          {
            'title': '关雎',
            'chapter': '国风',
            'section': '周南',
            'content': [
              '关关雎鸠，在河之洲。窈窕淑女，君子好逑。',
              '参差荇菜，左右流之。窈窕淑女，寤寐求之。',
              '求之不得，寤寐思服。悠哉悠哉，辗转反侧。',
              '参差荇菜，左右采之。窈窕淑女，琴瑟友之。',
              '参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。'
            ]
          },
          {
            'title': '葛覃',
            'chapter': '国风',
            'section': '周南',
            'content': [
              '葛之覃兮，施于中谷，维叶萋萋。黄鸟于飞，集于灌木，其鸣喈喈。',
              '葛之覃兮，施于中谷，维叶莫莫。是刈是濩，为絺为绤，服之无斁。',
              '言告师氏，言告言归。薄污我私，薄浣我衣。害浣害否，归宁父母。'
            ]
          }
        ]
      }
    },
    computed: {
      dataMessage () {
        // let locale = window.localStorage.getItem('locale')
        // window.localStorage.setItem('locale', locale)
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
        if (this.dataMsg) {
          this.currMsg = this.dataMsg[this.index - 1]
        }
      }
    },
    mounted: function () {
      let shijingIndex = window.localStorage.getItem('shijing_index')
      if (shijingIndex) {
        this.index = shijingIndex % 1000
      } else {
        window.localStorage.setItem('shijing_index', 1)
      }
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
    },
    methods: {
      changeUrl () {
        let url = '/shijing/shijing.json'
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      },
      prev () {
        if (this.index > 1) {
          this.index -= 1
          let shijingIndex = parseInt(window.localStorage.getItem('shijing_index')) - 1
          window.localStorage.setItem('shijing_index', shijingIndex)
          this.currMsg = this.dataMsg[this.index - 1]
        } else {
          let shijingIndex = parseInt(window.localStorage.getItem('shijing_index'))
          if (shijingIndex > 1) {
            window.localStorage.setItem('shijing_index', shijingIndex - 1)
            this.index = 1
            this.changeUrl()
          }
        }
      },
      next () {
        if (this.index < this.dataMsg.length) {
          this.index += 1
          let shijingIndex = parseInt(window.localStorage.getItem('shijing_index')) + 1
          window.localStorage.setItem('shijing_index', shijingIndex)
          this.currMsg = this.dataMsg[this.index - 1]
        } else {
          let shijingIndex = parseInt(window.localStorage.getItem('shijing_index'))
          if (shijingIndex < 254237) {
            window.localStorage.setItem('shijing_index', shijingIndex + 1)
            this.index = 1
            this.changeUrl()
          }
        }
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
